<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=0.3, user-scalable=yes" /><!-- initial-scale=1.0, maximum-scale=2.0, minimum-scale=1.0, user-scalable=yes -->
	<meta name="format-detection" content="telephone=no">
	<meta name="Keywords" content="(주)상산 오수처리시설 중앙관리 시스템" />
	<meta name="decription" content="(주)상산 오수처리시설 중앙관리 시스템 입니다." />
	<title>(주)상산</title>
	<script type="text/javascript" src="<c:url value='/htmlRes/js/jquery-1.10.2.js'/>"></script>
	<script type="text/javascript" src="<c:url value='/htmlRes/js/common.js'/>"></script>
	<link rel="stylesheet" type="text/css" href="<c:url value='/htmlRes/css/style.css'/>" />
	<link rel="stylesheet" type="text/css" href="<c:url value='/htmlRes/css/style_r.css'/>" />
	<script type="text/javascript" src="<c:url value='/htmlRes/js/high_chart/highcharts.js'/>"></script>
	<script type="text/javascript" src="<c:url value='/htmlRes/js/datepicker/jquery.ui.core.js'/>"></script>
	<script type="text/javascript" src="<c:url value='/htmlRes/js/datepicker/jquery.ui.datepicker.js'/>"></script>
	<!--[if lt IE 9]>
		<script type="text/javascript" src="/js/respond.min.js"></script>
	<![endif]-->
	<script type="text/javaScript">
	<!--
		$(document).ready(function(){
			$('.graph_box').each(function(index){
				var charId = $(this).attr('id');
				if($('#'+charId).html() != ""){
					var chartData = eval("("+$('#'+charId).html()+")");
					$('#'+charId).highcharts(chartData);
				}else{
					$('#'+charId).html("데이터가 없습니다.");
					$('#'+charId).css("text-align", "center");
					$('#'+charId).css("padding", "30px 0 0 0");
				}
			});
			
			setTimeout(searchForm, 1000*60*20);
			
			$( "#searchSdate" ).datepicker();
			$( "#searchEdate" ).datepicker();
			
			$('#logo').click(function(){
				location.href="/main.do";
			});
		});
		
		function searchForm(){
			$('#listForm').attr('action', '<c:url value="/mainChartAll.do"/>');
			$('#listForm').submit();
		}
	-->
	</script>
</head>
<body>
<ul id="skipNavi">
	<li><a href="#container">본문내용 바로가기</a></li>
	<li><a href="#gnb">전체메뉴 바로가기</a></li>
</ul>
<hr />
<div class="wrap">
	<!-- header s -->
	<div class="header type_graph">
		<div class="top">
        	<div class="left">
				<h1 class="tit_h1" id="logo">주식회사 상산<span>오수처리시설 중앙관리시스템</span></h1>
			</div>
			<div class="right">
            	<p class="log_text"><strong>${loginSessionInfo.ssa_area_name }</strong>이 로그인 중입니다</p>
            	<c:if test="${!empty loginSessionInfo.ssa_area_name }">
                <span class="log_box">
					<a href="<c:url value='/login/logout.do' />" class="btn_logout">로그아웃</a>
				</span>
            	</c:if>
            </div>
		</div>
	</div>

	<div class="container_graph" id="container">
		<div class="container_area">
			<%-- <span class="ico_print"><a href="#print"  onclick="printPage('<c:url value="/common/printView.do" />');return false;"><img src="/htmlRes/images/ico_print.jpg" alt="인쇄버튼"></a></span> --%>
			<div class="srch_wrap type_graph">
				<form name="listForm" id="listForm" method="post" action="<c:url value='/mainChartAll.do'/>">
					<fieldset>
						<legend>키워드 검색 영역</legend>
						<div class="srch_section1">
							<select id="searchCodeKey" name="searchCodeKey" title="권역을 선택하세요" onchange="searchForm();return false;">
								<option value="">전체 권역</option>
								<c:forEach var="resultZone" items="${zoneList }">
									<option value="${resultZone.scc_code_key }" <c:if test="${resultZone.scc_code_key eq mainVO.searchCodeKey }">selected="selected"</c:if>>${resultZone.scc_code_name }[${resultZone.scc_zone_aname }]</option>
								</c:forEach>
							</select>
							<label for="searchSdate">기간 </label><input type="text" id="searchSdate" name="searchSdate" value="${mainVO.searchSdate }"/> - <input type="text" id="searchEdate" name="searchEdate" value="${mainVO.searchEdate }">
							<a href="<c:url value='/main.do'/>" onclick="searchForm();return false;" class="btn_srch">검색</a>
							<!-- <label for="date" class="date">갱신주기</label>
							<select title="검색키워드를 선택하세요" id="date" name="date">
								<option value="">00일</option>
							</select> -->
						</div>
						<div class="srch_section2">
							<ul class="hide">
								<li>BOD</li>
								<li>SS</li>
								<li>T-N</li>
								<li>T-P</li>
							</ul>
						</div>
					</fieldset>
				</form>
			</div>
			<c:set var="zoneKey" value="" />
			<c:forEach var="chartInfo" items="${chartInfoList}" varStatus="status">
			<c:if test="${chartInfo.zoneKey ne zoneKey }">
				<c:if test="${!status.first }">
					</ul>
				</div>
				</c:if>
				<div class="graph_sec2">
					<h2 class="tit_h2">${chartInfo.zoneName }</h2>
					<ul class="graph_float_area">
			</c:if>
					<li>
						<div class="graph_area">
							<div class="graph_header"></div>
							<c:if test="${chartInfo.unusualYn eq 'Y' or empty chartInfo.unusualYn}"><span class="green">보통</span></c:if>
							<c:if test="${chartInfo.unusualYn eq 'N'}"><span class="red">심각</span></c:if>
							<div id="waterQualityChart${status.count}" class="graph_box">${chartInfo.waterQualityChart }</div>
						</div>
					</li>
				<c:set var="zoneKey" value="${chartInfo.zoneKey }" />
				<c:if test="${status.last }">
					</ul>
				</div>
				</c:if>
			</c:forEach>
		</div>
	</div>
<jsp:include page="../include/footer.jsp" />